<template>
  <div class="buy-input relative">
    <img class="w-40 h-40 absolute left-24" src="~@/assets/image/payment/search.png" alt="" />
    <input class="w-full box-border pl-80" :readonly="readonly" type="text" :value="value" :placeholder="placeholder" @input="changeVal"
      @focus="focus" />
  </div>
</template>

<script>
export default {
  name: 'BuyInput',
  props: ['value', 'placeholder','isReadonly'],
  data() {
    return {
      readonly: false
    }
  },
  mounted() {
    if(this.isReadonly) {
        this.readonly = this.isReadonly
      } else {
        this.readonly = false
      }
  },
  methods: {
    focus(e) {
      this.$emit('focus', e.target.value)
    },
    changeVal(e) {
      this.$emit('input', e.target.value)
    },
  },
}
</script>

<style lang="scss" scoped>
input {
  border: none;
  outline: none;
}

.buy-input {
  width: 100%;
  height: 100%;

  img {
    top: 50%;
    transform: translateY(-50%);
  }

  input {
    width: 100%;
    height: 100%;
    border-radius: 50px;

    @include themify() {
      background: themed("input_background");
    }

    @include themify() {
      color: themed("text_color");
    }
  }
}
</style>
